<template>
  <div>
    <!-- 表单部分 -->
    <el-card>
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        label-position="right"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="机构代码">
              <el-input
                v-model="searchForm.code"
                placeholder="请输入机构代码"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机构名称">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入机构名称"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机构层级">
              <el-select
                v-model="searchForm.hierarchy"
                placeholder="请选择机构层级"
                clearable
                :style="selectWidth"
              >
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
                <el-option label="7" value="7" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="有效状态">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择有效状态"
                clearable
                :style="selectWidth"
              >
                <el-option label="无效" value="0" />
                <el-option label="有效" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="所属地区">
            <el-col :span="8">
              <el-select
                v-model="selectedProvince"
                placeholder="请选择省"
                @change="handleProvinceChange(selectedProvince)"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="(province, index) in provinces"
                  :key="index"
                  :label="province.name"
                  :value="province.code"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select
                v-model="selectedCity"
                placeholder="请选择市"
                @change="handleCityChange(selectedProvince, selectedCity)"
                style="width: 200px; margin-left: 10px"
                clearable
              >
                <el-option
                  v-for="(city, index) in cities"
                  :key="index"
                  :label="city.name"
                  :value="city.code"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select
                v-model="selectedCounty"
                placeholder="请选择县"
                style="width: 200px; margin-left: 10px"
                clearable
              >
                <el-option
                  v-for="(county, index) in counties"
                  :key="index"
                  :label="county.name"
                  :value="county.code"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <!-- <el-col :span="8">
            <el-form-item label="机构树">
              <el-tree-select
                v-model="searchForm.mechanism"
                :data="mechanismList"
                filterable
                style="width: 240px"
                clearable
              />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="24">
            <el-form-item>
              <el-button @click="onSearchrest"
                ><el-icon><Refresh /></el-icon>重置</el-button
              >
              <el-button type="primary" @click="onSearch"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 5px">
        <!-- <el-button
          type="danger"
          plain
          size="small"
          :disabled="multiple"
          @click="deleteMultiple"
          ><el-icon><DeleteFilled /></el-icon>删除</el-button
        > -->
        <el-button type="primary" plain size="small" @click="onAdd"
          ><el-icon><DocumentAdd /></el-icon>添加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column prop="code" label="机构代码" />
        <el-table-column prop="name" label="机构名称" />
        <el-table-column prop="tier" label="机构层级" />
        <el-table-column prop="province" label="所属地区" />
        <el-table-column prop="validState" label="有效状态">
          <template #default="{ row }">
            <el-tag
              :disable-transitions="true"
              type="danger"
              v-if="row.validState === '0'"
              >否</el-tag
            >
            <el-tag
              :disable-transitions="true"
              type="success"
              v-if="row.validState === '1'"
              >是</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作选项" width="280">
          <template #default="{ row }">
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onPreview(row)"
              ><el-icon><View /></el-icon>查看</el-button
            >
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onEdit(row)"
              ><el-icon><Edit /></el-icon>修改</el-button
            >
            <el-button
              link
              plain
              type="danger"
              size="small"
              :disabled="row.validState === '0'"
              @click="onForbidden(row)"
              >禁用</el-button
            >
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onRevocation(row)"
              ><el-icon><Delete /></el-icon>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      v-model="addDialogVisible"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="onReset(addRuleFormRef)"
      width="45%"
    >
      <el-form
        ref="addRuleFormRef"
        style="min-width: 500px"
        :model="addRuleForm"
        :rules="addRules"
        label-width="120"
        class="demo-ruleForm"
        status-icon
      >
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="机构代码">
              <el-input
                v-model="addRuleForm.code"
                :disabled="title !== '添加'"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="机构名称" prop="name" name="name" required>
              <el-input
                v-model="addRuleForm.name"
                placeholder="请输入机构名称"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="栏目权限"
              prop="columnPermissions"
              name="columnPermissions"
              required
            >
              <el-tooltip
                v-if="isDisabled === '0' && addRuleForm.channelShort"
                effect="dark"
                :content="addRuleForm.channelAll"
                placement="bottom"
              >
                <el-input
                  :disabled="true"
                  class="box-item"
                  v-model="addRuleForm.channelShort"
                />
              </el-tooltip>
              <el-input
                class="box-item"
                v-if="isDisabled === '0' && !addRuleForm.channelShort"
                :disabled="true"
                v-model="addRuleForm.channelShort"
              />
              <el-select
                v-model="addRuleForm.columnPermissions"
                v-if="isDisabled === '1'"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择栏目权限"
                style="width: 240px"
              >
                <el-option
                  v-for="item in columnOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构层级" prop="tier" name="tier" required>
              <el-select
                v-model="addRuleForm.tier"
                placeholder="请选择机构层级"
                clearable
                :disabled="title !== '添加'"
                @change="changeHierarchy(addRuleForm.tier)"
              >
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
                <el-option label="7" value="7" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="上层机构名称"
              :required="upperNameOptions.length !== 0"
            >
              <el-select
                v-model="addRuleForm.upperName"
                placeholder="请选择上层机构名称"
                clearable
                :disabled="title !== '添加' || upperNameOptions.length === 0"
              >
                <el-option
                  v-for="item in upperNameOptions"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="所属省"
              prop="provinceCode"
              name="provinceCode"
              required
            >
              <el-select
                v-model="addRuleForm.provinceCode"
                placeholder="请选择省"
                @change="handleProvinceChange(addRuleForm.provinceCode)"
                style="width: 250px"
                :disabled="isDisabled === '0'"
              >
                <el-option
                  v-for="(province, index) in provinces"
                  :key="index"
                  :label="province.name"
                  :value="province.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属城市" prop="cityCode" name="cityCode">
              <el-select
                v-model="addRuleForm.cityCode"
                placeholder="请选择市"
                @change="
                  handleCityChange(
                    addRuleForm.provinceCode,
                    addRuleForm.cityCode
                  )
                "
                style="width: 250px"
                :disabled="isDisabled === '0'"
              >
                <el-option
                  v-for="(city, index) in cities"
                  :key="index"
                  :label="city.name"
                  :value="city.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属县/区" prop="countyCode" name="countyCode">
              <el-select
                v-model="addRuleForm.countyCode"
                placeholder="请选择区/县"
                style="width: 250px"
                :disabled="isDisabled === '0'"
              >
                <el-option
                  v-for="(county, index) in counties"
                  :key="index"
                  :label="county.name"
                  :value="county.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="address" name="cities">
              <el-input
                v-model="addRuleForm.address"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮编" prop="postCode" name="postCode">
              <el-input
                v-model="addRuleForm.postCode"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacts" name="contacts">
              <el-input
                v-model="addRuleForm.contacts"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="联系方式"
              prop="contactInfo"
              name="contactInfo"
            >
              <el-input
                v-model="addRuleForm.contactInfo"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构邮箱" prop="email" name="email">
              <el-input
                v-model="addRuleForm.email"
                clearable
                :disabled="isDisabled === '0'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有效状态" prop="validState" name="validState">
              <el-select
                v-model="addRuleForm.validState"
                clearable
                :disabled="isDisabled === '0'"
              >
                <el-option label="有效" value="1"></el-option>
                <el-option label="无效" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="isDisabled !== '0'">
        <div class="dialog-footer">
          <el-button @click="onReset(addRuleFormRef)">重 置</el-button>
          <el-button type="primary" @click="onSubmit(addRuleFormRef)"
            >提 交</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import locationData from '../../assets/city.js'
import {
  getDepartmentList,
  getDepartmentDetail,
  insertDepartment,
  getChannelsAdd,
  getUpperName,
  disableDepartment,
  updateDepartment,
  deleteDepartment,
  getProvince
} from '@/api/user/department.js'
const ids = ref([])
const multiple = ref(true)
const addRuleFormRef = ref()
const addDialogVisible = ref(false)
const total = ref(0)
const title = ref()
const selectWidth = ref('width:200px')
const selectedProvince = ref('')
const selectedCity = ref('')
const selectedCounty = ref('')
const provinces = ref([])
const cities = ref([])
const counties = ref([])
const isDisabled = ref()
const upperNameDisabled = ref(false)
const columnOptions = ref([])
const upperNameOptions = ref([])

const update = ref({
  departmentId: '',
  departmentCode: ''
})

// 添加表单的内容
const addRuleForm = ref({
  // code: '',
  name: '',
  tier: '',
  upperName: '',
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  address: '',
  postCode: '',
  contacts: '',
  contactInfo: '',
  email: '',
  validState: '',
  limit: '',
  mechanism: '',
  channelAll: '',
  channelShort: '',
  columnPermissions: []
})
// 机构树列表
// const mechanismList = ref([
//   {
//     value: '1',
//     label: '中国保险',
//     children: [
//       {
//         value: '1-1',
//         label: '车险平台'
//       },
//       {
//         value: '1-2',
//         label: '中介云平台'
//       }
//     ]
//   }
// ])

// 搜索表单内容
const searchForm = ref({
  code: '',
  name: '',
  hierarchy: '',
  district: '',
  status: ''
  // mechanism
})

const tableData = ref([])

// 校验规则
const addRules = reactive({
  name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
  provinceCode: [{ required: true, message: '请选择省', trigger: 'blur' }],
  status: [{ required: true, message: '请选择有效状态', trigger: 'blur' }],
  tier: [{ required: true, message: '请选择机构层级', trigger: 'blur' }],
  upperName: [
    { required: true, message: '请选择上层机构名称', trigger: 'blur' }
  ],
  columnPermissions: [
    { required: true, message: '请选择栏目权限', trigger: 'blur' }
  ]
})

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
// 搜索
const onSearch = () => {
  getList()
}
// 搜索重置
const onSearchrest = () => {
  selectedCity.value = ''
  selectedCounty.value = ''
  selectedProvince.value = ''
  cities.value = []
  counties.value = []
  searchForm.value.code = ''
  searchForm.value.name = ''
  searchForm.value.hierarchy = ''
  searchForm.value.district = ''
  searchForm.value.status = ''
  // searchForm.value.mechanism = ''
  getList()
}

watch(
  () => addRuleForm.value.tier,
  (val) => {
    val === '1'
      ? (upperNameDisabled.value = true)
      : (upperNameDisabled.value = false)
  },
  { immediate: true }
)

// 在组件挂载时获取数据
onMounted(() => {
  try {
    // provinces.value = locationData.provinces
    getProvince().then((res) => {
      provinces.value = res.data.codeList
    })
  } catch (error) {
    console.error('Failed to load location data:', error)
  }
})

const getList = () => {
  const params = {
    code: searchForm.value.code,
    name: searchForm.value.name,
    tier: searchForm.value.hierarchy,
    province: selectedProvince.value,
    city: selectedCity.value,
    county: selectedCounty.value,
    validState: searchForm.value.status
  }
  getDepartmentList({ ...params, ...queryParams.value }).then((res) => {
    tableData.value = res.data.pagination.list
    total.value = res.data.pagination.total
  })
  // 获取栏目权限列表
  getChannelsAdd().then((res) => {
    columnOptions.value = []
    Object.keys(res.data.channelMap).map((item) => {
      columnOptions.value.push({ id: item, label: res.data.channelMap[item] })
    })
  })
}

// 当省下拉框改变时的处理函数
const handleProvinceChange = (selectedProvince) => {
  const selectedProvinceData = provinces.value.find(
    (province) => province.code === selectedProvince
  )
  if (selectedProvinceData) {
    cities.value = selectedProvinceData.children || []
    selectedCity.value = ''
    selectedCounty.value = ''
    counties.value = []
    addRuleForm.value.cities = ''
    addRuleForm.value.counties = ''
  } else {
    cities.value = []
    selectedCity.value = ''
    selectedCounty.value = ''
    counties.value = []
    addRuleForm.value.cities = ''
    addRuleForm.value.counties = ''
  }
}

// 当市下拉框改变时的处理函数
const handleCityChange = (selectedProvince, selectedCity) => {
  const selectedProvinceData = provinces.value.find(
    (province) => province.code === selectedProvince
  )
  if (selectedProvinceData) {
    const selectedCityData = selectedProvinceData.children.find(
      (city) => city.code === selectedCity
    )
    if (selectedCityData) {
      counties.value = selectedCityData.children || []
      selectedCounty.value = ''
    } else {
      counties.value = []
      selectedCounty.value = ''
    }
  } else {
    counties.value = []
    selectedCounty.value = ''
  }
}
// 添加
const onAdd = () => {
  title.value = '添加'
  isDisabled.value = '1'
  addDialogVisible.value = true
}
// 根据机构层级选上层机构名称
const changeHierarchy = async (tier) => {
  if (tier) {
    await getUpperName(tier)
      .then((res) => {
        upperNameOptions.value = res.data.name
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
// 查看
const onPreview = (row) => {
  title.value = '查看'
  isDisabled.value = '0'
  addDialogVisible.value = true
  getDepartmentDetail({ id: row.id }).then((res) => {
    addRuleForm.value = {
      code: res.data.department.code,
      name: res.data.department.name,
      tier: res.data.department.tier,
      upperName: res.data.department.upperName,
      provinceCode: res.data.department.provinceCode,
      cityCode: res.data.department.cityCode,
      countyCode: res.data.department.countyCode,
      address: res.data.department.address,
      postCode: res.data.department.postCode,
      contacts: res.data.department.contacts,
      contactInfo: res.data.department.contactInfo,
      email: res.data.department.email,
      validState: res.data.department.validState,
      columnPermissions: res.data.columnPermissions,
      // channelShort:
      //   res.data.channelAll !== ''
      //     ? res.data.channelShort === ''
      //       ? res.data.channelAll
      //       : res.data.channelShort
      //     : '',
      channelAll: res.data.channelAll
      // mechanism: ''
    }
    if (res.data.channelShort === '') {
      if (res.data.channelAll !== '') {
        console.log(res.data.channelAll)
        addRuleForm.value.channelShort = res.data.channelAll
      } else {
        console.log(res.data.channelAll)
        addRuleForm.value.channelShort = res.data.channelShort
      }
    } else {
      addRuleForm.value.channelShort = res.data.channelShort
    }
  })

  handleProvinceChange(row.provinceCode)
  handleCityChange(row.provinceCode, row.cityCode)
}
// 修改
const onEdit = (row) => {
  title.value = '修改'
  isDisabled.value = '1'
  addDialogVisible.value = true
  getDepartmentDetail({ id: row.id }).then((res) => {
    const channel = []
    Object.keys(res.data.list_map).map((item) => {
      channel.push(item)
    })
    addRuleForm.value = {
      code: res.data.department.code,
      name: res.data.department.name,
      tier: res.data.department.tier,
      upperName: res.data.department.upperName,
      provinceCode: res.data.department.provinceCode,
      cityCode: res.data.department.cityCode,
      countyCode: res.data.department.countyCode,
      address: res.data.department.address,
      postCode: res.data.department.postCode,
      contacts: res.data.department.contacts,
      contactInfo: res.data.department.contactInfo,
      email: res.data.department.email,
      validState: res.data.department.validState,
      columnPermissions: channel,
      mechanism: ''
    }
    update.value.departmentCode = res.data.department.code
    update.value.departmentId = res.data.department.id
  })
  handleProvinceChange(row.provinceCode)
  handleCityChange(row.provinceCode, row.cityCode)
}
// 禁用
const onForbidden = (row) => {
  disableDepartment([row.id])
    .then((res) => {
      ElMessage({
        type: 'success',
        message: res.message
      })
      getList()
    })
    .catch((err) => {
      console.log(err)
    })
}

// 删除一条
const onRevocation = (row) => {
  ElMessageBox.confirm('您确定要删除这条数据吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await deleteDepartment({ departmentId: row.id })
        .then((res) => {
          ElMessage({
            type: 'success',
            message: res.data.buff3
          })
          getList()
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

// 删除多条
// const deleteMultiple = () => {
//   ElMessageBox.confirm('您确定要删除这几条数据吗？', '系统提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })
//     .then(async () => {
//       await deleteDepartment(ids.value)
//         .then((res) => {
//           ElMessage({
//             type: 'success',
//             message: res.data.buff3
//           })
//           getList()
//         })
//         .catch((err) => {
//           console.log(err)
//         })
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: '取消删除'
//       })
//     })
// }

// 提交
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = {
        name: addRuleForm.value.name,
        tier: addRuleForm.value.tier,
        upperName: addRuleForm.value.upperName,
        province: addRuleForm.value.provinceCode,
        city: addRuleForm.value.cityCode,
        county: addRuleForm.value.countyCode,
        address: addRuleForm.value.address,
        postCode: addRuleForm.value.postCode,
        contacts: addRuleForm.value.contacts,
        contactInfo: addRuleForm.value.contactInfo,
        email: addRuleForm.value.email,
        validState: addRuleForm.value.validState,
        channelIds: addRuleForm.value.columnPermissions
      }

      if (title.value === '添加') {
        await insertDepartment(data)
          .then((res) => {
            ElMessage.success(res.message)
            addDialogVisible.value = false
            getList()
          })
          .catch((err) => {
            console.log(err)
            addDialogVisible.value = false
          })
      } else {
        await updateDepartment({ ...data, ...update.value })
          .then((res) => {
            ElMessage.success(res.message)
            addDialogVisible.value = false
            getList()
          })
          .catch((err) => {
            console.log(err)
            addDialogVisible.value = false
          })
      }
    } else {
      console.log('error submit!', valid)
    }
  })
}
// 重置
const onReset = (formEl) => {
  addRuleForm.value = {
    code: '',
    name: '',
    hierarchy: '',
    upperName: '',
    provinces: '',
    cities: '',
    counties: '',
    address: '',
    postcode: '',
    person: '',
    mobile: '',
    email: '',
    status: '',
    columnPermissions: ''
  }
  formEl.resetFields()
}

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  multiple.value = !selection.length
}
getList()
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}

::v-deep {
  .el-form {
    .el-form-item .second_label {
      .el-form-item__label {
        font-weight: normal !important;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .second_label {
    .el-form-item__error {
      position: static !important;
    }
  }
}

::v-deep {
  .tree-border {
    margin-top: 5px;
    border: 1px solid #e5e6e7;
    background: #fff none;
    border-radius: 4px;
    width: 100%;
  }
}
::v-deep {
  .box-item {
    .el-input__inner {
      white-space: nowrap; /* 禁止文本换行 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    }
  }
}
</style>
